<template>
  <div class="join-addEdit">
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" destroy-on-close>
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称:" prop="username">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.username" maxlength="50" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="phone">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.phone" maxlength="50" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password" v-if="status == 'edit'">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.password" maxlength="50" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="仓库权限:" prop="yuangong">
          <el-select v-model="form.cangku" multiple placeholder="仓库">
            <el-option v-for="item in cangkus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品权限:" prop="shangpin">
          <el-switch v-model="form.shangpin" />
        </el-form-item>
        <el-form-item label="员工权限:" prop="yuangong">
          <el-switch v-model="form.yuangong" />
        </el-form-item>
        <el-form-item label="订单权限:" prop="dingdan">
          <el-switch v-model="form.dingdan" />
        </el-form-item>
        <el-form-item label="金钱权限:" prop="jinqian">
          <el-switch v-model="form.jinqian" />
        </el-form-item>
        <el-form-item label="会员权限:" prop="huiyuan">
          <el-switch v-model="form.huiyuan" />
        </el-form-item>
        <el-form-item label="设置权限:" prop="shezhi">
          <el-switch v-model="form.shezhi" />
        </el-form-item>
        <el-form-item label="统计权限:" prop="tongji">
          <el-switch v-model="form.tongji" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch, defineEmits, reactive } from 'vue'
import { addServerUser, editServerUser } from '@api/person'
import { encode, decode } from 'js-base64'
// import md5 from "js-md5"
import { ElMessage } from 'element-plus'
import { getAllCangkuList } from '@api/cangku'

const props = defineProps({
  status: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  },
  addEditData: {
    type: Object,
    default: {
      id: '',
      name: ''
    }
  }
})

const formRef = ref()

const form = ref({
  id: '',
  username: '',
  phone: '',
  password: '',
  yuangong: false,
  shangpin: false,
  dingdan: false,
  jinqian: false,
  huiyuan: false,
  shezhi: false,
  tongji: false,
  cangku: []
})

const rules = reactive({
  username: [{ required: true, message: '员工名称不能为空!', trigger: 'blur' }],
  phone: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.value.phone
        if (!value) {
          callback(new Error('电话不能为空!'))
        } else if (!/^1[3|4|5|7|8]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的电话号码!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.value.password
        if (!value) {
          callback(new Error('密码不能为空!'))
        } else if (value.length < 6 || value.length > 16) {
          callback(new Error('密码长度必须为6-16位之间'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const emit = defineEmits(['hide-addEdit'])

const title = computed(() => {
  return props.status == 'add' ? '添加员工' : '编辑员工'
})

function confirmFun() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = ''
      let { id, username, password, phone, yuangong, shangpin, dingdan, jinqian, huiyuan, shezhi, tongji, cangku } = form.value
      yuangong = yuangong ? 1 : 0
      shangpin = shangpin ? 1 : 0
      dingdan = dingdan ? 1 : 0
      jinqian = jinqian ? 1 : 0
      huiyuan = huiyuan ? 1 : 0
      shezhi = shezhi ? 1 : 0
      tongji = tongji ? 1 : 0

      if (props.status == 'add') {
        res = await addServerUser({ username, phone, cangku: cangku.join(','), yuangong, shangpin, dingdan, jinqian, huiyuan, shezhi, tongji })
      } else if (props.status == 'edit') {
        res = await editServerUser({
          id,
          username,
          password: encode(password, '313131#%%520asdlfj'),
          phone,
          cangku: cangku.join(','),
          yuangong,
          shangpin,
          dingdan,
          jinqian,
          huiyuan,
          shezhi,
          tongji
        })
      }

      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        emit('hide-addEdit', props.status)
      }
    }
  })
}

function cancelFun() {
  emit('hide-addEdit', 'cancel')
}

const cangkus = ref([])

const cangkusFun = async () => {
  let res = await getAllCangkuList()
  if (res.code) {
    cangkus.value = res.data.map((v) => {
      return {
        label: v.name,
        value: v.id + ''
      }
    })
  }
}

watch(
  () => props.addEditData,
  (newValue, oldValue) => {
    form.value.id = newValue.id
    form.value.username = newValue.username
    form.value.phone = newValue.phone
    form.value.yuangong = newValue.yuangong
    form.value.shangpin = newValue.shangpin
    form.value.dingdan = newValue.dingdan
    form.value.jinqian = newValue.jinqian
    form.value.huiyuan = newValue.huiyuan
    form.value.shezhi = newValue.shezhi
    form.value.tongji = newValue.tongji
    form.value.cangku = newValue.cangku
    form.value.password = decode(newValue.password)
  },
  { deep: true }
)

watch(
  () => props.show,
  (newValue, oldValue) => {
    cangkusFun()
  },
  { deep: true }
)
</script>
<style lang="scss" scoped></style>
